<template>
  <div>你的IP:{{ ip }}</div>
  <div>{{ city.province }} {{ city.city }}</div>
  <div>{{ weather.weather }} {{ weather.temperature }}℃</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { ElMessage } from 'element-plus'

const ip = ref('无法获取')
const city = ref({
  ip: '',
  lng: '',
  lat: '',
  nation: '',
  province: '获取中...',
  city: '',
  district: '',
  citycode: '',
})
const weather = ref({
  province: '',
  city: '',
  adcode: 0,
  weather: '',
  temperature: '',
  winddirection: '',
  windpower: '',
  humidity: '',
  reporttime: '',
  temperature_float: '',
  humidity_float: '',
})

onMounted(() => {
  getId()
})
const getId = () => {
  api.get('/tools/ip', {}, (data) => {
    if (!data.success) {
      ElMessage.error('获取IP失败')
      return
    }
    ip.value = data.data
    getCity()
  })
}

const getCity = () => {
  api.get('/tools/ipinfo', { ip: ip.value }, (data) => {
    if (!data.success) {
      city.value.province = '获取城市失败'
      return
    }
    city.value = data.data
    getWeather()
  })
}

const getWeather = () => {
  api.get('/tools/weather/live', { city: 430702 }, (data) => {
    if (data.success) {
      weather.value = data.data
    }
  })
}
</script>

<style scoped></style>
